:root
{
    --trip-seg-drive: #91EE91;
    --trip-seg-break: #FFB6C1;
    /* --trip-seg-wait: #e39dff; */
    --trip-seg-wait-1: transparent;
    /* #cde6ff; */
    --trip-seg-wait-2: #99ccff9c;
    --trip-seg-overdue-1: transparent;
    --trip-seg-overdue-2: #ff383852;

    --trip-seg-event: #2c2c2c;
    --trip-seg-warning: #ffdd57;
    --trip-seg-dwell: #cfcfcf;
    --trip-seg-eta: #585858;
    --trip-seg-appointment: #858585;

    --trip-seg-height: 1.5rem;

    /* room kept to the right of a timeline's flags for their labels (ETA, Appointment Time) */
    --trip-flag-label-room: 6.5rem;

    --trip-line-before: #cacaca;
    --trip-line-after: #f1f1f1;

    --estimate-min-col-width: 3rem;

    /* expand/collapse animation of the order details pane; JS reads this value, so this is the only place to change it */
    --detail-pane-animation-duration: 0.3s;


    --trip-seg-event-urgent: red;
    --trip-seg-event-warning: #f5d427;
    --trip-seg-event-alert: #f3901d;
    --trip-seg-event-info: #5ba5f5;
}

.hos-info-cell > p
{
    display: flex;
    align-items: center;
}

.hos-info-cell .material-symbols-outlined {
    /* margin-right: 0.3rem; */
    width: 1.3rem;
    font-size: 1.1rem;
}

/* dark grey baseline shows through before the segments start (margin-left area); the timeline div's own lighter line covers the rest and gets hidden behind the actual segments */
.trip-segment-cell {
    background-image: linear-gradient(var(--trip-line-before), var(--trip-line-before));
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position-y: calc(var(--trip-seg-height)/2);
}

.trip-segment-timeline {
    display: flex;
    align-items: stretch;
    position: relative; /* containing block for the absolutely positioned appointment flag */
    height: 3rem;
    padding-right: var(--trip-flag-label-room);
    /* padding-left: 3rem; */
    
    /* grey timeline line */
    background-image: linear-gradient(var(--trip-line-after), var(--trip-line-after));
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position-y: calc(var(--trip-seg-height)/2);
}

.trip-segment {
    /* height: 100%; */
    height: var(--trip-seg-height);
    flex-shrink: 0;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    padding: 0 3px;
    cursor: pointer;
    /* width is set inline by JS; keep padding inside it so rendered width matches the JS offset math */
    box-sizing: border-box;
    z-index: 1;
}

.trip-segment > .duration {
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* align-self: center; */
    /* margin: auto 3px; */
    /* padding: auto 3px; */
    text-align: center;
    font-size: 0.8em;
    white-space: nowrap;
    overflow: hidden;
    /* text-overflow: ellipsis; */
}

.trip-segment-drive {
    background: var(--trip-seg-drive, #3e7dd8);
}

.trip-segment-dwell {
    background: var(--trip-seg-dwell, rgb(226, 128, 0));
}

.trip-segment-wait {
    background-image: linear-gradient(45deg, var(--trip-seg-wait-2) 10%, var(--trip-seg-wait-1) 10%, var(--trip-seg-wait-1) 50%, var(--trip-seg-wait-2) 50%, var(--trip-seg-wait-2) 60%, var(--trip-seg-wait-1) 60%, var(--trip-seg-wait-1) 100%);
    background-size: 10px 10px;
}

/* the wait segment's hatching in red: time between the appointment flag and the start of the segments */
.trip-segment-overdue {
    background-image: linear-gradient(45deg, var(--trip-seg-overdue-2) 10%, var(--trip-seg-overdue-1) 10%, var(--trip-seg-overdue-1) 50%, var(--trip-seg-overdue-2) 50%, var(--trip-seg-overdue-2) 60%, var(--trip-seg-overdue-1) 60%, var(--trip-seg-overdue-1) 100%);
    background-size: 10px 10px;
}

.trip-segment-event {
    position: relative;
     /* width is set inline by JS (EVENT_MARKER_WIDTH) so it stays in sync with the offset math */
    box-sizing: border-box;
    height: calc(var(--trip-seg-height) * 2);
    flex-shrink: 0;
    background: var(--trip-seg-event, #2c2c2c);
    color: var(--trip-seg-event, #2c2c2c);
    cursor: pointer;
    z-index: 0;
}

.trip-segment-event.trip-segment-warning {
    background: var(--trip-seg-warning, #ffdd57);
    color: var(--trip-seg-warning, #ffdd57);
}

.trip-segment-event-icon {
    position: absolute;
    /* top: var(--trip-seg-height); */
    bottom: 0;
    padding-top: .2rem;
    /* left: 50%; */
    transform: translateX(-110%);
    font-size: 1.2rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

.trip-segment-event-urgent { background: var(--trip-seg-event-urgent); color: var(--trip-seg-event-urgent)}
.trip-segment-event-warning { background: var(--trip-seg-event-warning); color: var(--trip-seg-event-warning);}
.trip-segment-event-alert { background: var(--trip-seg-event-alert); color: var(--trip-seg-event-alert); }
.trip-segment-event-info { background: var(--trip-seg-event-info); color: var(--trip-seg-event-info); }


.trip-segment-eta {
    background: var(--trip-seg-eta);
}

.trip-segment-eta > .trip-segment-event-icon {
    font-size: 0.7rem;
    transform: translateX(4px);
    padding-bottom: .1rem;
    color: var(--trip-seg-eta);
}

/* appointment flags sit above the timeline; event and ETA flags stay below. The timeline line is at half of --trip-seg-height, so the bar ends there and extends upward */
.trip-segment-appointment {
    position: absolute; /* left is set inline by JS, relative to the timeline */
    height: calc(var(--trip-seg-height)* 2);
    top: calc(var(--trip-seg-height) * -1);
    background: var(--trip-seg-appointment);
}

.trip-segment-appointment > .trip-segment-event-icon {
    top: 0;
    transform: translateX(4px);
    font-size: 0.7rem;
    color: var(--trip-seg-appointment);
}

.trip-segment-warning {
    background: var(--trip-seg-warning, #ffdd57);
}

.trip-segment-break {
    background: var(--trip-seg-break, red);
}

/* ===== Expanded order details pane (estimate timeline beside the stop boxes) ===== */

#stops-header-actions {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

#stops-header-actions .material-symbols-outlined {
    font-size: 1.1rem;
}

/* estimate cells only exist visually while the pane is expanded; they live in the same grid rows as the stop boxes */
.estimate-header-row,
.estimate-cell {
    display: none;
}

#detail-bar.expanded {
    position: fixed; /* top/left/right/bottom are set by JS to cover everything right of the side bar */
    width: auto;
    z-index: 2000; /* above map controls, below modals */
    box-shadow: -6px 0 16px rgba(0, 0, 0, 0.25);
}

/* grows/shrinks between the pane's column and the expanded rectangle */
#detail-bar.expanded.animating {
    transition: top var(--detail-pane-animation-duration) ease, bottom var(--detail-pane-animation-duration) ease,
        left var(--detail-pane-animation-duration) ease, right var(--detail-pane-animation-duration) ease;
}

@media (prefers-reduced-motion: reduce) {
    #detail-bar.expanded.animating {
        transition: none;
    }
}

/* keep the non-stop sections readable instead of stretching across the wide pane */
#detail-bar.expanded #order-detail-rec-info,
#detail-bar.expanded #order-detail .table-container > :not(#stops-container),
/* #detail-bar.expanded #power-recs-container, */
#detail-bar.expanded #plan-load-container {
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}

#detail-bar.expanded #stops-scroll {
    display: grid;
    grid-template-columns: 4rem 20rem repeat(7, max-content);
    overflow-x: auto;
    overflow-y: hidden;
    text-align: left;
}

/* each stop row's children become cells of the shared grid, so the stop box and its estimate cells share a row height */
#detail-bar.expanded #stops-scroll > .columns,
#detail-bar.expanded #stops-scroll > .estimate-header-row {
    display: contents;
}

#detail-bar.expanded #stops-scroll .stops-progress {
    width: auto !important;
    position: sticky;
    left: 0;
    z-index: 3;
}

#detail-bar.expanded #stops-scroll .stop-message {
    margin: 0 0 1.5rem 0;
    position: sticky;
    left: 4rem;
    z-index: 3;
    box-shadow: 4px 0 4px -2px rgba(0, 0, 0, 0.2);
}

#detail-bar.expanded .estimate-header-cell {
    display: flex;
    align-items: flex-end;
    padding: 0 0.75rem 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid #dbdbdb;
    font-size: 0.75rem;
    font-weight: bold;
    white-space: nowrap;
}

#detail-bar.expanded .estimate-header-cell.estimate-sticky {
    position: sticky;
    z-index: 3;
    background-color: #fff;
}

#detail-bar.expanded .estimate-sticky-progress {
    left: 0;
}

#detail-bar.expanded .estimate-sticky-stop {
    left: 4rem;
}

/* bottom padding mirrors the stop box's bottom margin so content centers on the stop box */
#detail-bar.expanded .estimate-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 0.75rem 1.5rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

#detail-bar.expanded .estimate-cell.trip-segment-cell {
    align-items: stretch;
    padding-left: 2rem;
    padding-right: 0;
    /* padding-right: 2rem; */
    background-position-y: calc(50% - 0.75rem); /* center the baseline on the stop box, matching the margin-top below */
}

/* the timeline is 3rem tall with its line 0.75rem from the top; this margin puts that line at the cell's vertical center */
#detail-bar.expanded .estimate-cell.trip-segment-cell .trip-segment-timeline {
    margin-top: 1.5rem;
}

/* legend for the trip segment timeline, shown below the stops while expanded */
#stops-estimate-legend {
    display: none;
}

#detail-bar.expanded #stops-estimate-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    margin-top: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dbdbdb;
    font-size: 0.75rem;
    /* text-align: left;  */
    align-items: center;
    justify-content: center;
}

.trip-legend-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.trip-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.trip-legend-swatch {
    width: 1.5rem;
    height: 0.9rem;
    flex-shrink: 0;
}

.trip-legend-line {
    width: 3px;
    height: 1.1rem;
    flex-shrink: 0;
}

.trip-legend-icon {
    font-size: 1.1rem;
    color: #4a4a4a;
}

/* wrap the lower container */
#detail-bar.expanded .detail-lower-container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}


@media screen and (max-width: 768px) {
    #stops-header-actions {
        display: none;
    }
}